<!--
  * 重置密码确认弹窗
  *
  * @Author:    1
  * @Date:      2024-03-21
-->
<template>
  <a-modal title="确认提示" :open="visibleFlag" @cancel="onClose" :maskClosable="false" :destroyOnClose="true" :width="400">
    <div class="confirm-content">
      <span class="confirm-icon">
        <QuestionCircleOutlined style="color: #faad14; font-size: 22px" />
      </span>
      <div class="confirm-message">
        <div>是否允许重置密码</div>
        <div class="confirm-desc">是否重置密码，重置后请及时修改密码，该操作不可逆，请确认！</div>
      </div>
    </div>

    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleConfirm">确定</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { message } from 'ant-design-vue'
  import { QuestionCircleOutlined } from '@ant-design/icons-vue'
  import { smartSentry } from '/@/lib/smart-sentry'
  import { storeApi } from '/@/api/business/b-merchant/store/store-api.js'

  const emits = defineEmits(['success'])
  const visibleFlag = ref(false)
  const loading = ref(false)
  const currentRecord = ref(null)

  // 显示弹窗
  function show(record) {
    currentRecord.value = record
    visibleFlag.value = true
  }

  // 关闭弹窗
  function onClose() {
    visibleFlag.value = false
    currentRecord.value = null
  }

  // 确认重置密码
  async function handleConfirm() {
    loading.value = true
    let newPwd = ref(null)
    try {
      const params = {
        id: currentRecord.value.id,
      }
      const queryResult = await storeApi.resetPwd(params)
      newPwd.value = queryResult.data.pwd
      message.success({
        content: `密码重置成功, 新密码为：${newPwd.value}`,
        duration: 5, // 消息显示的时长（秒），设置为 null 表示不会自动关闭
        key: 'resetPasswordMessage', // 为消息设置一个唯一的 key
      })
      emits('success')
      onClose()
    } catch (error) {
      smartSentry.captureError(error)
      message.error('密码重置失败')
    } finally {
      loading.value = false
    }
  }

  defineExpose({
    show,
  })
</script>

<style scoped>
  .confirm-content {
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
  }

  .confirm-icon {
    margin-right: 16px;
    margin-top: 2px;
  }

  .confirm-message {
    flex: 1;
  }

  .confirm-desc {
    margin-top: 8px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
  }
</style>
